<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab插件测试</title>
<link type="text/css" rel="stylesheet" media="all" href="../css/style.css"/>
<script type="text/javascript" src="../jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../plugins/mytab.v1.0.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var ObjToStr = function(o) {
                if (o == undefined) {
                    return "";
                }
                var r = [];
                if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
                if (typeof o == "object") {
                    if (!o.sort) {
                        for (var i in o)
                            r.push("\"" + i + "\":" + ObjToStr(o[i]));
                        if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                            r.push("toString:" + o.toString.toString());
                        }
                        r = "{" + r.join() + "}"
                    } else {
                        for (var i = 0; i < o.length; i++)
                            r.push(ObjToStr(o[i]))
                        r = "[" + r.join() + "]";
                    }
                    return r;
                }
                return o.toString().replace(/\"\:/g, '":""');
            }
		$("#myTab").myTab({
			tabHead:".tabLi",//标签头部
			tabContent:".tabContent",//标签主体内容
			//tabBind:"click",//标签绑定事件,默认点击
			tabIndex: 0,//默认选中第一个标签
			tabOn: ".tabLi",//标签选择添加点
			tabSelected: "tabSelected"//标签选中样式
		});
		var offset = $("#myTab").offset(),
			position = $("#myTab").position();
			/*alert(ObjToStr(offset));
			alert(ObjToStr(position));
			alert(offset.left);
			alert(offset.top);
			alert(position.left);
			alert(position.top);*/
	});
</script>
</head>

<body>
	<div style="margin-bottom:10px; margin-top:100px; margin-left:50px; position:relative;">
    	<div id="myTab" class="myTab">
            <ul>
                <li><a href="javascript:void(0);" class="tabLi">选项卡1</a></li>
                <li><a href="javascript:void(0);" class="tabLi">选项卡2</a></li>
                <li><a href="javascript:void(0);" class="tabLi">选项卡3</a></li>
                <li><a href="javascript:void(0);" class="tabLi">选项卡4</a></li>
            </ul>
            <div class="tabContent">选项卡1内容</div>
            <div class="tabContent">选项卡2内容</div>
            <div class="tabContent">选项卡3内容</div>
            <div class="tabContent">选项卡4内容</div>
        </div>
    </div>
	
</body>
</html>
